<template>
  <div>
    <div v-if="!previewPlay" class="img-wrap">
      <img class="sxc-image-item" :src="item.filePath" v-for="(item, idx) in imageSrcList" :key="idx" />
    </div>
    <div class="img-wrap" ref="imgWrap" v-else>
      <div ref="imgLists" style="position: absolute; left: 0px; top: 0px;" v-if="previewPlay">
        <img style="width:100%" class="sxc-image-item" ref="imgItem" :src="item.filePath"  v-for="(item, idx) in imageSrcList" :key="idx" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: 'sxc-image',
  props: {
    previewPlay: {
      type: Boolean,
      default: false
    },
    play: {
      type: Boolean,
      default: false
    },
    imageSrcList: {
      type: Array,
      default: () => []
    }
  },
  mounted(){
    let that = this;
    this.$nextTick(function(){
      if(that.$refs.imgLists){
        let imgLength = 0;
        for(let i=0; i<that.$refs.imgLists.children.length; i++){
          that.$refs.imgLists.children[i].style.setProperty("width", that.$refs.imgLists.parentElement.offsetWidth + 'px');
          that.$refs.imgLists.children[i].style.setProperty("height", that.$refs.imgLists.parentElement.offsetHeight + 'px');
          imgLength += that.$refs.imgLists.parentElement.offsetWidth;
          that.$refs.imgLists.style.setProperty("width", imgLength + 'px');
          that.imageWrapWidth = that.$refs.imgLists.parentElement.offsetWidth;
        }
        that.imageTimeInit();
      }
    })
  },
  computed: {
    ...mapGetters('programs', ['currScene']),
  },
  data() {
    return {
      imageWrapWidth:0,
      imageTimeId:'',
      imageFlag:0,
      slideCurrent: 1,
      loopTime:2
    };
  },
  methods:{
    imageTimeInit(){
      let that = this;
      let imageLen = that.imageWrapWidth*(that.imageFlag + 1);
      that.loopTime = that.imageSrcList[0].switchType === true ?  (that.imageSrcList[0].animateInfoAll ? that.imageSrcList[0].animateInfoAll.imgSwitchTime * 1000 : 2000) : that.imageSrcList[that.imageFlag].animateInfo ? that.imageSrcList[that.imageFlag].animateInfo.imgSwitchTime * 1000 : 2000
      that.imageTimeId = setTimeout(function(){
        that.$refs.imgLists.style.transform = "translate3d(-"+(imageLen)+"px, 0px, 0px)"
        that.$refs.imgLists.style['transition-duration'] = "1000ms"
        if(that.imageFlag >= that.imageSrcList.length - 1){
          that.$refs.imgLists.style.transform = "translate3d(0px, 0px, 0px)"
          that.$refs.imgLists.style['transition-duration'] = "0ms"
          that.imageFlag = 0;
        }else{
          that.imageFlag++;
        }
        that.imageTimeInit();
      }, that.loopTime );
    }
  }
};
</script>

<style lang="scss">
.img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.sxc-image-item {
  width: 100%;
  height: 100%;
  float: left;
}
</style>
